<template>
  <!-- 设备匹配 -->
  <div class="ContractInfo">
    <div class="router-box" style=" margin-bottom: 20px;">
      <el-row :gutter="10">
        <el-col :span="8">
          <router-link :to="{name:'ContractInfo'}">基本信息</router-link>
        </el-col>
        <el-col :span="8">
          <router-link :to="{name:'DeviceMatching'}">设备匹配</router-link>
        </el-col>
        <el-col :span="8">
          <router-link :to="{name:'DeliverGoodsHistory'}">发货信息</router-link>
        </el-col>
      </el-row>
    </div>
    <div class="search-box">
      <el-input placeholder="请输入内容" class="input-with-select">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>

    </div>

    <!-- 表格 -->
    <div class="absolute-box" style='flex:1' v-if='heTong.length>0'>
      <el-table @row-click="openDialog"
                :data="heTong"
                height="100%"
                border
                style="width: 100%;">
        <el-table-column
            prop="hT_Title"
            label="名称">
        </el-table-column>
        <el-table-column
            prop="qianDingDate"
            label="签订日期">
        </el-table-column>
        <el-table-column
            prop="hT_ID_N"
            label="合同内部编号">
        </el-table-column>

      </el-table>
    </div>

    <!-- 弹出form -->
    <el-dialog :title="model.hT_ID_N" :visible.sync="dialogFormVisible">

      <el-collapse v-model="activeNames">

        <el-collapse-item title="待匹配设备清单" name="1">
          <el-table
              :data="daipipei"
              height="100%"
              border
              style="width: 100%;">
            <el-table-column
                prop="productName_W"
                label="名称">
            </el-table-column>
            <el-table-column
                prop="productVersion_W"
                label="型号">
            </el-table-column>
            <el-table-column
                prop="shuLiang"
                label="数量">
            </el-table-column>
            <el-table-column
                prop="danwei"
                label="计量单位">
            </el-table-column>
            <el-table-column
                prop="danJia"
                label="价格">
            </el-table-column>
            <el-table-column
                prop="remark"
                label="备注">
            </el-table-column>

            <el-table-column
                prop="uDWName"
                label="使用单位">
            </el-table-column>
            <el-table-column
                prop="jHDate"
                label="交货日期">
            </el-table-column>
            <el-table-column
                prop="ProductModel"
                label="内部型号">
            </el-table-column>
            <el-table-column
                prop="productName_N"
                label="内部名称">
            </el-table-column>
            <el-table-column
                prop="ProductModelVersion"
                label="版本号">
            </el-table-column>
            <el-table-column
                prop="technicalRemark"
                label="技术要求">
            </el-table-column>
          </el-table>
        </el-collapse-item>


        <el-collapse-item title="设备清单（附加）" name="2">
          <el-table
              :data="fujia"
              height="100%"
              border
              style="width: 100%;">
            <el-table-column
                prop="productName_W"
                label="名称">
            </el-table-column>
            <el-table-column
                prop="productVersion_W"
                label="型号">
            </el-table-column>
            <el-table-column
                prop="shuLiang"
                label="数量">
            </el-table-column>
            <el-table-column
                prop="danwei"
                label="计量单位">
            </el-table-column>
            <el-table-column
                prop="danJia"
                label="价格">
            </el-table-column>
            <el-table-column
                prop="remark"
                label="备注">
            </el-table-column>

            <el-table-column
                prop="uDWName"
                label="使用单位">
            </el-table-column>
            <el-table-column
                prop="jHDate"
                label="交货日期">
            </el-table-column>
            <el-table-column
                prop="ProductModel"
                label="内部型号">
            </el-table-column>
            <el-table-column
                prop="productName_N"
                label="内部名称">
            </el-table-column>
            <el-table-column
                prop="ProductModelVersion"
                label="版本号">
            </el-table-column>
            <el-table-column
                prop="technicalRemark"
                label="技术要求">
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false">关闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return{
        heTong: {},
        activeNames: ['1'],
        dialogFormVisible:false,
        model: {},
        fujia: {},
        daipipei: {}
      }
    },
    created() {
      // 在模板渲染成html前调用,即通常初始化某些属性值

      this.$http.get('/mock/HeTong/InitWaitMatchHetongList.json').then((response) => {
        response = response.body;
        this.heTong = response.rows;
      });
      this.$http.get('/mock/HeTong/daipipei.json').then((response) => {
        response = response.body;
        this.daipipei = response.rows;
      });
      this.$http.get('/mock/HeTong/fujia.json').then((response) => {
        response = response.body;
        this.fujia = response.rows;
      });
    },
    methods: {
      openDialog:function(row, event, column) {
        this.dialogFormVisible=true;
        this.model = row;
      }
    }
  }
</script>

<style>

</style>